<script setup lang="ts">
import {onMounted, ref} from "vue";
import TnPopup from "@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue";
import TnIcon from "@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue";
import { getCategoryListApi } from "@/api/home";
import {getNavBarHeight} from "@/utils/navBarHeight";
const showPopup = ref<boolean>(false);
const list = ref([]);
const code = ref("");
const currentIndex = ref(0);
const childrenCode = ref("");
let strText1 = ref("筛选");
let strText2 = ref("");

/**
 * 重置
 */
const reset = () => {
  code.value = list.value[0]?.code || "";
  currentIndex.value = 0;
  childrenCode.value = "";
  strText2.value = "";
}

/**
 * 确认
 */
const emit = defineEmits(["submit"])
const submit = () => {
  showPopup.value = false;
  emit("submit", code.value, childrenCode.value);
}

const getData = async () => {
  showPopup.value = true;
  if (list.value.length > 0) {
    return;
  }
  const res = await getCategoryListApi();
  if (res?.code === 200) {
    list.value = res?.data || [];
    code.value = list.value[0].code;
    strText1.value = list.value[0].name;
  }
}

/**
 * 添加子级
 * @param data
 */
const addChildren = (data: any) => {
  childrenCode.value = data.code;
  strText2.value = data.name;
}
const addCode = (index: number, codeStr: string) => {
  currentIndex.value = index;
  childrenCode.value = ''
  code.value = codeStr;
}

const init = async (num: number) => {
  if(num > 2) {
    return;
  }
  const res = await getCategoryListApi();
  if (res?.code === 200) {
    list.value = res?.data || [];
    code.value = list.value[0].code;
    strText1.value = list.value[0].name;
  } else {
    setTimeout(() => {
      init(num++);
    }, 1000)
  }
}

onMounted(async () => {
  // init(0);
})

defineExpose({
  childrenCode,
  code,
  init,
})

</script>

<template>
  <view>
    <view class="tip-text" @click="getData">
      <span class="">{{ list[currentIndex]?.name }} <span v-if="strText2">/{{ strText2 }}</span></span>
      <TnIcon name="down-triangle" :size="40" color="#666666" />
    </view>
    <view>
      <TnPopup v-model="showPopup" bg-color="transparent" radius="0" open-direction="top" :safe-area-inset-bottom="false">
        <view class="type-box">
          <view class="title" :style="{ paddingTop: getNavBarHeight() - 40 + 'px' }">筛选条件</view>
          <view class="header">
            <view class="header-item-1">一级类目</view>
            <view class="header-item-2"><span class="ml20px">二级类目</span></view>
<!--            <view class="header-item-3"><span class="ml20px">附加服务（多选）</span></view>-->
          </view>
          <view class="item-content">
            <view class="item-content-left">
              <view class="item-content-left-item" v-for="(item, index) in list" :key="item.code" :class="{'item-content-left-item-active': currentIndex === index}" @click="addCode(index, item.code)">
                <view class="line-left"></view>
                {{ item.name }}
              </view>
            </view>
            <view class="item-content-right">
              <view class="item-content-right-left" v-for="item in list?.[currentIndex]?.children" :key="item.code" :class="{'blue-text': childrenCode === item.code}" @click="addChildren(item)">
                {{item.name}}
              </view>
            </view>
          </view>
          <view class="footer">
            <view class="footer-left" @click="reset">重置</view>
            <view class="footer-right" @click="submit">确定</view>
          </view>
        </view>
      </TnPopup>
    </view>
  </view>
</template>

<style scoped lang="scss">
.tip-text {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  padding: 2px 3px 2px 8px;
  border-radius: 3px;
  color: #666666;
}
.type-box {
  background: #ffffff;
  .title {
    font-size: 16px;
    color: #1D2129;
    width: 100%;
    text-align: center;
    padding-top: 10px;
  }
  .header {
    display: flex;
    align-items: center;
    height: 52px;
    border-bottom: 1px solid #eee;
    .header-item-1 {
      min-width: 120px;
      font-size: 12px;
      text-align: center;
      color: #666666;
    }
    .header-item-2 {
      flex: 3;
      font-size: 12px;
      color: #666666;
    }
    .header-item-3 {
      flex: 4;
      font-size: 12px;
      color: #666666;
    }
  }
  .item-content {
    height: calc(100vh - 275px);
    display: flex;
    .item-content-left {
      width: 120px;
      min-width: 120px;
      height: calc(100vh - 270px);
      background: #F7F8FA;
      overflow: scroll;
      .item-content-left-item {
        height: 52px;
        line-height: 52px;
        font-size: 14px;
        letter-spacing: normal;
        color: #1D2129;
        padding-left: 20px;
        position: relative;
      }
      .item-content-left-item-active {
        background: #ffffff;
        color: #165DFF;
        .line-left {
          position: absolute;
          left: 0;
          height: 22px;
          width: 3px;
          border-radius: 2px;
          background: #165DFF;
          top: 13px;
        }
      }
    }
    .item-content-right {
      width: 100%;
      .item-content-right-left {
        flex: 3;
        padding: 32rpx 32rpx;
        background: #ffffff;
        overflow: scroll;
      }
      .item-content-right-right {
        flex: 4;
        background: #0a0a0a;
        padding: 16px;
      }
      .blue-text {
        color: #165DFF;
      }
    }
  }
  .footer {
    height: 90px;
    padding: 18px;
    display: flex;
    align-items: center;
    .footer-left {
      height: 44px;
      flex: 1;
      background: #E8F3FF;
      line-height: 44px;
      text-align: center;
      color: #165DFF;
      border-radius: 4px;
      margin-right: 9px;
    }
    .footer-right {
      height: 44px;
      flex: 1;
      margin-left: 9px;
      line-height: 44px;
      text-align: center;
      border-radius: 4px;
      background: #165DFF;
      color: #fff;
    }
  }
  .ml20px {
    margin-left: 16px;
  }
}
.blue-text {
  color: #165DFF;
}
</style>